<template>
  <a-modal
    v-model:visible="visible"
    title="添加角色"
    :width="'900px'"
    :after-close="afterClose"
    :body-style="{ width: '900px', height: '550px' }"
    @ok="handleOk"
  >
    <div class="permission-manag-detailb-mobody">
      <div class="fixitem1">
        <a-tabs v-model:activeKey="activeKey" @change="onChangeSwitch">
          <a-tab-pane key="1" tab="托管角色">
            <tree ref="mytree" @tree-node-selected="treeNodeSelected"></tree>
          </a-tab-pane>
          <a-tab-pane key="2" tab="非托管角色">
            <div style="margin: 0 15px">
              <a-input-search placeholder="搜索" @search="onSearch"></a-input-search>
            </div>
            <a-table
              :columns="columnsR"
              :data-source="dataL"
              size="small"
              :scroll="{ y: 286 }"
              :row-selection="rowSelectionL"
              :pagination="pagFun.pagInfo"
              @change="pagFun.onChange"
            ></a-table>
          </a-tab-pane>
        </a-tabs>
      </div>
      <div class="buto">
        <div class="butom" @click="rightCli"><RightOutlined /></div>
        <div class="butom" @click="leftCli"><LeftOutlined /></div>
      </div>
      <div class="fixitem2">
        <a-table
          :columns="columnsR"
          :data-source="dataR"
          size="small"
          :scroll="{ y: 422 }"
          :row-selection="rowSelectionR"
          :pagination="false"
        ></a-table>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import { ref, reactive, inject, defineExpose, defineEmits } from 'vue'
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue'
import tree from '../leftgroup/tree'
import factory from '../../factory'
const visible = ref(true)
defineExpose({ visible })
const activeKey = ref('1')
//==左侧1================================
const leftSelData = ref([])
//树选择后
const treeNodeSelected = (checkeditems) => {
  //只传叶子节点, 父节点不传
  leftSelData.value = checkeditems
}
//==左侧2================================
//翻页功能
const pagFun = reactive({
  pagInfo: { pageNo: 1, pageSize: 10, total: 10 },
  onChange: (pagination, filters, sorter, { currentDataSource }) => {
    leftSelData.value = []
    rowSelectionL.selectedRowKeys = []
    pagFun.pagInfo.pageNo = pagination.current
    pagFun.pagInfo.pageSize = pagination.pageSize
    getTableData()
  },
})
const dataL = ref([])
const getTableData = (pag = { ...pagFun.pagInfo }) => {
  factory.getTableData(pag).then((res) => {
    dataL.value = res.data.dataList
    pagFun.pagInfo.total = res.data.totalCount
  })
}
getTableData()
const rowSelectionL = reactive({
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
    rowSelectionL.selectedRowKeys = selectedRowKeys
    leftSelData.value = selectedRows.map((m) => {
      return { name: m.name, key: m.key }
    })
  },
  selectedRowKeys: [],
  getCheckboxProps: (record) => ({
    disabled: record.name === 'Disabled User',
    name: record.name,
  }),
})
//非托管搜索
const onSearch = (val) => {
  getTableData({ ...pagFun.pagInfo, search: val })
}

//==右侧表格============================
const rightSelData = ref([])
const columnsR = [
  { title: '角色名', dataIndex: 'name' },
  { title: '角色标识', dataIndex: 'key' },
]
const dataR = ref([])
const rowSelectionR = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
    rightSelData.value = selectedRows.map((m) => {
      return { name: m.name, key: m.key }
    })
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === 'Disabled User',
    name: record.name,
  }),
}

//==穿梭===================================

const rightCli = () => {
  leftSelData.value.forEach((m) => {
    if (!dataR.value.find((item) => item.key === m.key)) {
      dataR.value.push(m)
    }
  })
}
const leftCli = () => {
  let arr = dataR.value.filter((m) => !rightSelData.value.find((item) => item.key === m.key))
  dataR.value = arr
}

//==切换===========================
const mytree = ref(null)
const onChangeSwitch = () => {
  mytree.value.clearKey()
  rowSelectionL.selectedRowKeys = []
  leftSelData.value = []
}

//==保存=========================================
const emit = defineEmits(['after-close', 'add-success'])
const { currentItemId } = inject('roleParams')
const handleOk = () => {
  let arr = dataR.value.map((m) => m.key)
  let post = { roles: arr, privilege: currentItemId.value.key }
  factory.addRoleToPerm(post).then((res) => {
    emit('add-success', '') //新增成功
    afterClose()
  })
}
const afterClose = () => {
  visible.value = false
  emit('after-close', '')
}
</script>
<style scoped lang="less">
.permission-manag-detailb-mobody {
  display: flex;
  width: 100%;
  height: 100%;
  //background-color: #dadada;
  padding: 15px;

  .fixitem1 {
    flex: 5;
    padding: 10px;
    background-color: white;
    border: 1px solid #dadada;
  }

  .fixitem2 {
    flex: 4;
    padding: 10px;
    background-color: white;
    border: 1px solid #dadada;
  }

  .buto {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
    width: 50px;
  }

  .butom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
    background-color: white;
    cursor: pointer;
  }
}
</style>
<style lang="less">
.permission-manag-detailb-mobody {
  .ant-pagination-options {
    display: none;
  }
}
</style>
